<template>
  <mt-navbar title="线索详情" bg-color="#1484EE" left-icon-color="#ffffff" :title-style="{ color: '#ffffff' }"> </mt-navbar>
  <view v-if="detailInfo" class="safety-150">
    <view class="flex bg-[rgba(247,119,92,0.05)] px-24rpx py-16rpx rd-8rpx">
      <image
        class="w-32rpx h-32rpx mr-16rpx mt-6rpx"
        src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-clock1.svg"
      ></image>
      <view v-if="!detailInfo.isEnd" class="flex-1 min-w-0 text-28rpx text-#F7775C">
        <view>超时未处理，线索将共享给其它盟商！</view>
        <view>倒计时：<count-down :endtime="detailInfo.timeOutReallocateTime" @end="handleEndTime"></count-down></view>
      </view>
      <view v-else class="flex-1 min-w-0 text-28rpx text-#F7775C">
        <view>超时未处理，线索已共享给其它盟商</view>
      </view>
    </view>
    <view class="bg-#ffffff px-32rpx py-32rpx mb-16rpx">
      <mt-title>
        <template #title>
          <text class="text-32rpx font-bold">线索信息</text>
        </template>
      </mt-title>
      <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">所属分类：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.productCategoryParentName }}</view>
      </view>
      <!-- <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">发布城市：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.city }}</view>
      </view> -->
      <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">联系人：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.contactsName }}</view>
      </view>
      <!-- <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">联系人职位：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.duty }}</view>
      </view> -->
      <!-- <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">联系人地址：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.companyAddress }}</view>
      </view> -->
      <!-- <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">联系人公司：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.companyName }}</view>
      </view> -->
      <view class="flex mt-24rpx line-height-28rpx">
        <view class="w-190rpx text-28rpx text-#727687">创建时间：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ dayjs(detailInfo.createTime).format('YYYY-MM-DD') }}</view>
      </view>
      <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">描述：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.remark }}</view>
      </view>
    </view>
    <view class="bg-#ffffff px-32rpx py-32rpx">
      <mt-title>
        <template #title>
          <text class="text-32rpx font-bold">线索处理动态</text>
        </template>
        <template #right>
          <text class="text-28rpx text-#727687">共有{{ detailInfo.distributionServiceProviderList?.length }}家盟商</text>
        </template>
      </mt-title>
      <view>
        <uv-tabs :current="currentTab" :list="detailInfo.distributionServiceProviderList" @change="tabsChange">
          <template #default="{ row }">
            <view>
              <text>{{ row.distributionServiceProviderName }}</text>
              <text v-if="row.clueStatus === 0" class="ml-8rpx px-8rpx py-4rpx rd-4rpx text-24rpx text-#F7775C bg-[rgba(247,119,92,0.1)]"
                >待处理</text
              >
              <text v-if="row.clueStatus === 1" class="ml-8rpx px-8rpx py-4rpx rd-4rpx text-24rpx text-#007BFF bg-[rgba(0,123,255,0.1)]">处理中</text>
              <text v-if="row.clueStatus === 2" class="ml-8rpx px-8rpx py-4rpx rd-4rpx text-24rpx text-#EFB339 bg-[rgba(239,179,57,0.1)]"
                >待返佣</text
              >
              <text v-if="row.clueStatus === 3" class="ml-8rpx px-8rpx py-4rpx rd-4rpx text-24rpx text-#28B094 bg-[rgba(40,176,148,0.1)]"
                >已完成</text
              >
              <text v-if="row.clueStatus === 4" class="ml-8rpx px-8rpx py-4rpx rd-4rpx text-24rpx text-#f56c6c bg-[rgba(245,108,108,0.1)]"
                >拒绝接单</text
              >
            </view>
          </template>
        </uv-tabs>
      </view>
      <view v-if="detailInfo.distributionServiceProviderList[currentTab]?.clueFollowList" class="pt-16rpx">
        <clue-step :data="detailInfo.distributionServiceProviderList[currentTab].clueFollowList">
          <template #title="{ row }">
            <view class="text-28rpx text-#1C213E font-bold break-all">
              <text v-if="row.followClueStatus === 0">待处理</text>
              <text v-if="row.followClueStatus === 1">处理中</text>
              <text v-if="row.followClueStatus === 2">待返佣</text>
              <text v-if="row.followClueStatus === 3">已完成</text>
              <text v-if="row.followClueStatus === 4">拒绝接单</text>
            </view>
          </template>
          <template #desc="{ row }">
            <view>
              <view class="text-28rpx text-#1C213E mt-32rpx break-all">{{ row.followContent }}</view>
              <view class="text-28rpx text-#727687 mt-16rpx break-all">{{ row.remark }}</view>
              <view class="mt-16rpx">
                <view class="w-560rpx">
                  <mt-file-preview :list="row.followFileUrls"></mt-file-preview>
                </view>
              </view>
              <view class="text-24rpx text-#ADB0BD mt-32rpx break-all">{{ row.followTime }}</view>
            </view>
          </template>
        </clue-step>
      </view>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button v-if="detailInfo.phoneReceiveFlag === 1" class="flex-1" type="info" :shake="false" style="margin-right: 16rpx" @click="goRefuse">
        拒绝接单
      </mt-button>
      <mt-button class="flex-1" type="info" :shake="false" style="margin-right: 16rpx" @click="openFollow"> 跟进 </mt-button>
      <mt-button v-if="detailInfo.phoneReceiveFlag === 1" class="flex-1" :shake="false" @click="handleReceive"> 接单 </mt-button>
      <mt-button v-if="detailInfo.phoneReceiveFlag !== 1" class="flex-1" :shake="false" @click="makePhoneCall">
        <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-phone.svg"></image>
        <text>电话接单</text>
      </mt-button>
    </view>
  </view>
</template>

<script setup>
import { cluegetClueDetail, cluephoneReceive, cluereceive } from '@/subClue/api/index';
import clueStep from '@/subClue/components/clue-step.vue';
import countDown from '@/subClue/components/count-down.vue';
import dayjs from 'dayjs';

const currentTab = ref(0);
// 切换 tab 状态
function tabsChange(e) {
  currentTab.value = e.index;
}

function handleEndTime() {
  detailInfo.value.isEnd = true;
}

const detailInfo = ref(null);
function getDetail() {
  cluegetClueDetail({ type: '2', clueId: clueId.value }).then((res) => {
    const obj = res.data;
    const p_name = JSON.parse(obj.productCategoryName);
    obj.productCategoryParentName = p_name[0];
    obj.productCategoryName = p_name[1];
    for (const item of obj.distributionServiceProviderList) {
      for (const son of item.clueFollowList) {
        son.followFileUrls = son.followFileUrls ? JSON.parse(son.followFileUrls) : [];
      }
    }
    obj.isEnd = false;

    detailInfo.value = obj;
  });
}

function openFollow() {
  uni.navigateTo({
    url: `/subClue/pages/followUp?id=${detailInfo.value.id}`
  });
}

function goRefuse() {
  uni.navigateTo({
    url: `/subClue/pages/refuseOrder?id=${detailInfo.value.id}&back=2`
  });
}

function handleReceive() {
  cluereceive({ clueId: detailInfo.value.id }).then((res) => {
    uni.showToast({
      icon: 'none',
      title: '操作成功',
      duration: 1000
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1000);
  });
}

function makePhoneCall() {
  cluephoneReceive({ clueId: detailInfo.value.id }).then((res) => {
    uni.makePhoneCall({
      phoneNumber: res.data.virtualPhone,
      success: () => {
        detailInfo.value = null;
        getDetail();
      }
    });
  });
}

const clueId = ref('1');
onLoad((options) => {
  clueId.value = options.id;
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#1484EE'
  });
});

onShow(() => {
  detailInfo.value = null;
  getDetail();
});
</script>

<style lang="scss" scoped>
.top-status-box {
  .line {
    width: 80rpx;
    height: 20rpx;
    border-bottom: 2rpx solid #ffffff;
  }
  .trans {
    opacity: 0.5;
  }
}
</style>
